<template>

  <div class="hello">
    <el-table
      border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="日期"
        width="100">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="80">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)" class="el-icon-edit">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)" class="el-icon-delete-solid">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :page-size="pageSize"
      :current-page="currentPage"
      background
      layout="prev, pager, next"
      @current-change="page"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>

export default {
  methods: {

    handleEdit(){

    },
    page(pageSize){
      this.pageSize=pageSize;
      this.getUsers()
    },
    handleDelete(){

    },
    getUsers() {
      //https://www.fastmock.site/mock/0fd5b1c65e35cde350a33e2850fc54d1/hoemwork/stu/list
      //当前Vue实例的tableData
      this.$http.post("/stu/list",
        {"currentPage": this.currentPage, "pageSize": this.pageSize}).then(res => {
        //res.data - axios获取数据的固定语法,最后一个data是响应的数据
        this.tableData = res.data.data;
        this.total = res.data.total;
      }).catch(res => {
      })
    },
  },
  data() {
    return {
      pageSize:5,
      currentPage:1,
      total:100,


      tableData: []
    }

  },
  mounted() {
    this.getUsers()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
